<template>
	<view class="my">
		<view class="container">
			<button open-type="chooseAvatar" @chooseavatar="chooseavatar">1111</button>
			<image :src="avatarUrl" mode="widthFix" style="width: 80rpx;"></image>
			<form @submit="onSubmit">
				<view class="wrapper">
					<view class="avatar-wrapper">
						<view class="left">
							<view class="name">头像</view>
						</view>
						<view class="right" @click="">
							<!-- <image :src="userInfo.avatar" mode="aspectFill"></image> -->
							 <u-avatar size="80rpx" :src="userInfo.avatar" ></u-avatar>
						</view>
					</view>
					<view class="avatar-wrapper">
						<view class="left">
							<view class="name">姓名</view>
						</view>
						<view>
							<input v-model="userInfo.nickname" type="nickname" placeholder="请输入昵称" name="nickname"
								style="text-align: right;" />
						</view>
					</view>
					
					<view class="avatar-wrapper">
						<view class="left">
							<view class="name">联系电话</view>
						</view>
						<view>
							<input v-model="userInfo.nickname" type="nickname" placeholder="请输入联系电话" name="nickname"
								style="text-align: right;" />
						</view>
					</view>
					
					<view class="avatar-wrapper">
						<view class="left">
							<view class="name">所在地区</view>
						</view>
						<view>
							<input v-model="userInfo.nickname" type="nickname" placeholder="省市区县、乡镇等" name="nickname"
								style="text-align: right;" />
						</view>
					</view>
					
					<view class="avatar-wrapper">
						<view class="left">
							<view class="name">详细地址</view>
						</view>
						<view style="flex: 1;">
							<u--textarea v-model="value1" placeholder="街道、楼牌号" height="100rpx"></u--textarea>
						</view>
					</view>
					
					
				</view>
				<view class="btn">
					<button form-type="submit">提交</button>
				</view>
			</form>
							
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				avatarUrl: '',
				userInfo:{
					
				},
				value2: '统计字数',
			}
		},
		onLoad() {

		},
		onShow() {
			
		},
		methods:{
			chooseavatar(e){
				console.log(e.detail.avatarUrl)
				this.avatarUrl = e.detail.avatarUrl
				debugger
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.my {
		margin-top: 24rpx;
	}
	
	.wrapper {
		overflow: hidden;
		border-radius: 16rpx;
	}
	
	.card,
	.avatar-wrapper {
		box-sizing: border-box;
		width: 100%;
		padding: 0 24rpx;
		background: #fff;
	}
	
	.avatar-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 36rpx 40rpx;
		border-bottom: 1px solid #f5f5f5;
		.left {
			width: 30%;	
			.name {
				font-size: 30rpx;
				color: #212121;
			}
		}
	
		.right {
			width: 126rpx;
			height: 126rpx;
	
			& image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	}
	
	.card {
		padding: 0 24rpx;
	}
	
	.u-cell .u-cell__body {
		padding: 30rpx 0 !important;
	}
	
	.slot-content {
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		width: 100%;
	
		.text-area {
			width: 100%;
			margin: 25rpx 0;
			background: #F7F5F5;
	
			& textarea {
				box-sizing: border-box;
				width: 100%;
				padding: 24rpx;
				background: #F7F5F5;
				font-size: 28rpx;
				color: #666;
				border-radius: 16rpx;
			}
		}
	}
	
	.confirm-button {
		display: flex;
		align-items: center;
		justify-content: space-between;
	
		& button {
			width: 230rpx;
			line-height: 72rpx;
			background: #48B279;
			font-size: 30rpx;
			color: #fff;
			border-radius: 36px;
	
			&:first-child {
				background: #fff;
				border: 1px solid #48B279;
				color: #48B279;
			}
		}
	}
	
	.cropper {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 8;
		background: rgba(0, 0, 0, .5);
	
		.icon {
			position: absolute;
			top: 10%;
			right: 10%;
			z-index: 10;
		}
		.cropper-view{
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 500rpx;
			height: 500rpx;
		.cropper-img{
			width: 100%;
			height: 100%;
			}
		}
	}
	
	.btn {
		position: fixed;
		bottom: 70rpx;
		left: 0;
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
	
		& button {
			width: 100%;
			line-height: 90rpx;
			padding: 0;
			background: #8071FC;
			font-size: 30rpx;
			color: #fff;
			border-radius: 50rpx;
		}
	}
	
</style>